<!--
@author fshuaxm
@Date  2022-09-21
-->
<template>
  <div class="top-post">
    <div class="top-post-head-container">
      <div class="top-post-head">
        <div class="top-post-title">
          <img class="top-post-title-logo" src="../../assets/top/logo@3x.png" />
          <img
            class="top-post-title-resource"
            src="../../assets/top/resource@3x.png"
          />
        </div>
        <div class="top-post-search">
          <van-dropdown-menu class="search-type">
            <van-dropdown-item v-model="searchType" :options="searchOption" />
          </van-dropdown-menu>
          <div class="search-divider"></div>
          <van-field
            class="search-input"
            v-model="searchInput"
            placeholder="请输入关键字"
          />
          <van-button class="search-btn" type="info" @click="onSearch"
            >搜索</van-button
          >
        </div>
      </div>
    </div>
    <div class="top-post-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="card"
            v-for="(item, index) in list"
            :key="item.id"
            @click="detail(item.id)"
          >
            <div class="top">
              <h2 class="title">{{ item.title }}</h2>
              <div class="salary">
                <template v-if="item.maxMoney > 1000">
                  <span>{{ salaryFilter(item.minMoney) }}</span
                  >-<span>{{ salaryFilter(item.maxMoney) }}</span>
                </template>
                <template v-else>
                  面议
                </template>
              </div>
            </div>
            <div class="types">
              <div v-if="item.eduLevel_dictText">
                {{ item.eduLevel_dictText }}
              </div>
              <div v-if="item.minExperience !== undefined">
                {{ experienceFilter(item) }}
              </div>
              <div v-if="item.needCount">{{ item.needCount }}人</div>
            </div>
            <div class="location">
              <div class="compony" v-if="item.companyName">
                {{ item.companyName }}
              </div>
              <div class="position" v-if="item.jobCity_dictText">
                <!-- <van-icon name="location" /> -->
                <img src="../../assets/dizhi.png" />
                <span>{{ item.jobCity_dictText }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import {
  Divider,
  List,
  PullRefresh,
  Search,
  Icon,
  DropdownMenu,
  DropdownItem,
  Button,
  Field,
} from "vant";
import { topList } from "@/api/api";
import { Toast } from "vant";
import common from "./common";

export default {
  name: "TopPostList",
  components: {
    navBar,
    vanList: List,
    vanPullRefresh: PullRefresh,
    divider: Divider,
    vanSearch: Search,
    vanIcon: Icon,
    vanButton: Button,
    vanDropdownMenu: DropdownMenu,
    vanDropdownItem: DropdownItem,
    vanField: Field,
  },
  //存放数据
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      searchType: 0,
      searchInput: "",
      searchOption: [
        { text: "全部", value: 0 },
        { text: "校园招聘", value: 1 },
        { text: "社会招聘", value: 2 },
      ],
      listQuery: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    const { token } = this.$route.query;
    if (!token) {
      return;
    }
    this.$store.dispatch("loginTop", { token });
  },
  methods: {
    experienceFilter(e) {
      const experience = e.minExperience + "," + e.maxExperience;
      const res = this.$store.state.experience.find(
        (item) => item.value === experience
      );
      return res.label;
    },
    salaryFilter(a) {
      if (a >= 1000) {
        return a / 1000 + "K";
      } else {
        return a;
      }
    },
    onSearch() {
      this.loading = true;
      this.finished = false;
      this.listQuery.pageNo = 1;
      this.onLoad();
    },
    onRefresh() {
      this.list = [];
      this.loading = true;
      this.finished = false;
      this.listQuery.pageNo = 1;
      this.onLoad();
    },
    onLoad() {
      const { token = "", title, companyId } = this.$route.query;
      if (this.finished) {
        return;
      }
      const req = {
        type: this.searchType,
      };
      if (title) {
        req.title = title;
      }
      if (companyId) {
        req.companyId = companyId;
      }
      if (this.searchInput) {
        req.title = this.searchInput;
      }
      topList(Object.assign(req, this.listQuery), {
        headers: { "X-Access-Token": token },
      })
        .then((response) => {
          if (response.code !== 200) {
            Toast(response.message);
            this.finished = true;
            return;
          }
          if (response.result.current == 1) {
            this.list = response.result.records;
          } else {
            this.list = this.list.concat(response.result.records);
          }
          if (response.result.current >= response.result.pages) {
            this.finished = true;
          } else {
            this.listQuery.pageNo++;
          }
        })
        .finally(() => {
          this.loading = false;
          this.refreshing = false;
        });
    },
    detail(id) {
      const token = this.$route.query.token;
      if (!token) {
        Toast(common.noLoginTxt);
        return;
      }
      this.$router.push({ path: "/top/details", query: { id, token } });
    },
  },
};
</script>

<style lang="scss">
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-post {
  .top-post-head-container {
    background-image: linear-gradient(#0754eb, #f0f2f5);
    height: 638px;
    .top-post-head {
      height: 638px;
      background-image: url("../../assets/top/mask.png");
      background-repeat: no-repeat;
      .top-post-title {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding-top: 188px;
        .top-post-title-logo {
          height: 55px;
        }
        .top-post-title-resource {
          height: 175px;
        }
      }
      .top-post-search {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 97%;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 38px 38px 38px 38px;
        opacity: 1;
        height: 80px;
        .search-type {
          width: 30%;
          background: #ffffff;
          border-radius: 38px 38px 38px 38px;
          opacity: 1;
          .van-dropdown-menu__bar {
            height: 100%;
            border-radius: 38px 38px 38px 38px;
            opacity: 1;
            box-shadow: none;
            .van-dropdown-menu__title {
              height: 28px;
              .van-ellipsis {
                // font-size: 20px;
                font-size: 0.4rem;
                line-height: 28px;
              }
            }
          }
          .van-dropdown-item {
            margin-top: 7px;
          }
        }
        .search-divider {
          height: 80%;
          opacity: 0.82;
          border: 1px solid #707070;
        }
        .search-input {
          width: 50%;
          padding: 0;
          .van-cell__value {
            height: 100%;
            .van-field__body {
              background: #fff;
            }
          }
        }
        .search-input::after {
          display: none;
        }
        .search-btn {
          width: 20%;
          height: 100%;
          border-radius: 38px 38px 38px 38px;
          opacity: 1;
          .van-button__text {
            font-size: 0.4rem;
            line-height: 28px;
          }
        }
      }
    }
  }
  .top-post-list {
    margin-top: -150px;
    background: #f5f5f5;
    border-radius: 60px 60px 0px 0px;
    opacity: 1;
    padding-top: 52px;
    padding-bottom: 50px;
    .card {
      padding: 36px 38px 37px 38px;
      background: #fff;
      border-radius: 15px;
      margin: 20px 30px 0px 30px;
      background: linear-gradient(124deg, #ffffff 0%, #ebf2ff 100%);
      box-shadow: 0px 0px 20px 1px #b1c8f3;
      border-radius: 20px 20px 20px 20px;
      opacity: 1;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 35px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #474747;
          line-height: 35px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 72%;
        }
        .salary {
          width: 25%;
          font-size: 35px;
          font-family: Roboto-Bold, Roboto;
          font-weight: bold;
          color: #0654ea;
          line-height: 32px;
          display: flex;
          justify-content: flex-end;
        }
      }
      .types {
        margin-top: 12px;
        font-size: 24px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #848484;
        line-height: 24px;
        display: flex;
        justify-content: flex-start;
        div {
          width: 115px;
          height: 40px;
          background: #ebf2ff;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          margin-right: 8px;
          text-align: center;
          line-height: 40px;
        }
      }
      .location {
        margin-top: 56px;
        display: flex;
        justify-content: space-between;
        .compony {
          font-size: 24px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #848484;
          line-height: 32px;
        }
        .position {
          font-size: 24px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #b7b7b7;
          line-height: 32px;
          img {
            width: 20px;
            display: inline;
          }
        }
      }
    }
  }
}
</style>
